<template>
  <el-dialog :id="id" title="打印" v-model="visible" width="60%" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
    <div ref="printRef" style="height: 400px; overflow-y: auto">
      <div v-for="(order, index) in list" :key="index">
        <dl>
          <dt>订单编号</dt>
          <dd>{{ order.orderCode }}</dd>
          <dt>供应商</dt>
          <dd>{{ order.supplierName }}</dd>
          <dt>下单时间</dt>
          <dd>{{ order.createTime }}</dd>
          <dt>订单状态</dt>
          <dd>{{ consts.orderStatus[order.orderStatus] }}</dd>
          <dt>收款账户</dt>
          <dd>{{ order.bankAccount }}</dd>
          <dt>收款银行</dt>
          <dd>{{ order.depositBank }}</dd>
          <dt>收货人</dt>
          <dd>{{ order.shippingPerson }}</dd>
          <dt>联系电话</dt>
          <dd>{{ order.shippingMobile }}</dd>
          <dt>收货地址</dt>
          <dd>{{ order.shippingProvince }}{{ order.shippingDetail }}</dd>
        </dl>

        <table>
          <thead>
            <th>商品</th>
            <th>属性</th>
            <th>价格</th>
            <th>数量</th>
            <th>单位</th>
            <th>金额</th>
          </thead>
          <tbody>
            <tr v-for="goods in order.orderGoodsList" :key="goods.goodsId">
              <td>{{ goods.goodsName }}</td>
              <td>{{ goods.goodsSpec }}</td>
              <td>{{ goods.price }}</td>
              <td>{{ goods.amount }}</td>
              <td>{{ goods.unit }}</td>
              <td>{{ goods.totalPrice }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <template #footer>
      <span class="btns">
        <Button label="取消" class="is-plain" @click="onCancelClick" />
        <Button label="确认" type="warning" @click="onSubmitClick" />
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, nextTick, shallowRef, watch, ref, onMounted } from 'vue'
import { calcTableHeight } from '@/assets/js/utils'
import consts from '@/consts'
import addWaterMarker from '@/assets/js/waterMarker'
import Button from '@/components/button/button.vue'

const id = ref('')

const props = defineProps(['visible', 'list'])
const emit = defineEmits(['update:visible'])

const { tableRef, tableHeight } = calcTableHeight()

const printRef = shallowRef()

const visible = computed({
  get: () => {
    if (props.visible) {
      id.value = `w-${props.list[0].orderId}`
    }
    return props.visible
  },
  set: (value) => emit('update:visible', value)
})

watch(visible, (val) => {
  if (val) {
    addWaterMarker(id.value, '耶购电子商务')
  }
})

const onCancelClick = () => {
  visible.value = false
}

const onSubmitClick = () => {
  nextTick(() => {
    const h = printRef.value.innerHTML
    const iframe = document.createElement('iframe')
    document.body.appendChild(iframe)
    const div = document.createElement('div')
    div.innerHTML = `
    <style>  
      @media print{
        body{
        -webkit-print-color-adjust: exact;
        }
      }
      dt,
      dd {
        margin: 0;
        padding: 0;
      }

      dl {
        width: 100%;
        overflow: hidden;
      }
      dt {
        float: left;
        width: 50%;
      }
      dd {
        float: left;
        width: 50%;
      }

      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #cbcbcb;
        height: 80px;
        overflow-y: auto;
      }

      table thead {
        background-color: #e0e0e0;
        color: #000;
        text-align: center;
        vertical-align: bottom;
      }
      
      thead th {
        border-left: 1px solid #cbcbcb;
        border-bottom: 1px solid #cbcbcb;
        font-size: inherit;
        overflow: visible;
        padding: 0.5em 1em;
      }
      table tbody tr {
        height: 20px;
      }
      
      table tbody td {
        text-align: center;
        background-color: transparent;
        border-bottom: 1px solid #cbcbcb;
        border-left: 1px solid #cbcbcb;
      }
    </style>

    ${h}`

    const doc = iframe.contentWindow.document
    const body = doc.querySelector('body')
    doc.title = '耶购网'
    addWaterMarker(body, '耶购电子商务', true)

    setTimeout(() => {
      doc.body.appendChild(div)
      iframe.contentWindow.focus()
      iframe.contentWindow.print()

      document.body.removeChild(iframe)
    }, 0)
  })
}
</script>

<style scoped>
dt,
dd {
  margin: 0;
  padding: 0;
}

dl {
  width: 100%;
  overflow: hidden;
  padding: 0 20px;
}
dt,
dd {
  display: inline-block;
}
dt {
  width: 100px;
}
dd {
  width: calc(100% - 120px);
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #cbcbcb;
  height: 80px;
  overflow-y: auto;
}

table thead {
  background-color: #e0e0e0;
  color: #000;
  text-align: center;
  vertical-align: bottom;
}

thead th {
  border-left: 1px solid #cbcbcb;
  font-size: inherit;
  overflow: visible;
  padding: 0.5em 1em;
}
table tbody tr {
  height: 20px;
}

table tbody td {
  text-align: center;
  background-color: transparent;
  border-bottom: 1px solid #cbcbcb;
  border-left: 1px solid #cbcbcb;
}
</style>
